<template>
	<div class="list">
		<page-title :title="title"></page-title>
		<!-- 列表 -->
		<div class="list-wrap">
			<div id="wrap">
				<vue-better-scroll class="user-trace" slot="list" ref="scroll" :scrollbar="scrollbarObj" :pullDownRefresh="pullDownRefreshObj" :pullUpLoad="pullUpLoadObj" :startY="parseInt(startY)" @pullingDown="onPullingDown" @pullingUp="onPullingUp">
					<div class="list-tag">
						<ul>
							<li @click="switchTags(-85)" :class="{'isChosedTags':choseTagsId==-85}">全部</li>
							<li v-for="(item,i) in tags" :key="i" @click="switchTags(item.id)" :class="{'active':item.active,'isChosedTags':choseTagsId==item.id}">
								{{item.name}}
							</li>
						</ul>
					</div>
					<ul>
						<li v-if="page.list.length>0" class="ls-box" v-for="item in page.list" :key="item.id">
							<router-link :to="{path:'spread',query:{id:item.id}}">
								<div class="ls-l"><img :src="item.thumburl+'?imageMogr2/interlace/1/thumbnail/!200x150r/crop/200x150'" @error="errImg"></div>
								<div class="ls-r">
									<h4 class="title">{{item.name}}</h4>
									<span class="time">{{item.release_time}}</span>
								</div>
							</router-link>
						</li>
					</ul>
				</vue-better-scroll>
			</div>
		</div>
	</div>
</template>

<script>
import BScroll from 'better-scroll'
import VueBetterScroll from '@/components/Loadpullup'
import draggable from 'vuedraggable'
import { XDialog, Scroller, Loading, Divider } from 'vux'
import { findSpreadListPage, findYXBrandVideoTags } from '@/api/spread.js'
import { getEnterpriseInfo } from "@/api/enterprise";

// import InfiniteLoading from 'vue-infinite-loading';
export default {
	data() {
		return {
			// 这个配置可以开启滚动条，默认为 false。当设置为 true 或者是一个 Object 的时候，都会开启滚动条，默认是会 fade 的
			scrollbarObj: {
				fade: true
			},
			// 这个配置用于做下拉刷新功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启下拉刷新，可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）
			pullDownRefreshObj: {
				threshold: 90,
				stop: 40
			},
			// 这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载，可以配置离底部距离阈值（threshold）来决定开始加载的时机
			pullUpLoadObj: {
				threshold: 0,
				txt: {
					more: '<img class="scroll-loading" src="">',
					noMore: '没有更多数据了'
				}
			},
			startY: 0,  // 纵轴方向初始化位置
			scrollToX: 0,
			scrollToY: 0,
			scrollToTime: 700,
			maxHeight: null,
			enterprise: null,
			//微信菜单配置传过来的参数
			params: this.$route.query.params,
			title: '品牌视频',

			page: {
				totalRow: null,
				pageNumber: 1,
				pageSize: 10,
				lastPage: false,
				list: [],
			},
			onFetching: false,
			list: [],
			// 当前选中的标签ID，0表示全部
			choseTagsId: -85,
			tags: [],
		}
	},
	components: {
		draggable,
		XDialog,
		Loading,
		Divider,
		VueBetterScroll
	},
	methods: {
		// 列表数据请求
		findSpreadListPageMethods(pageNumber, pageSize, params, tagsId) {
			if (!this.onFetching) {
				this.onFetching = true
				findSpreadListPage(pageNumber, pageSize, params, tagsId).then(resp => {
					this.page = resp.page
					if (this.page.pageNumber < this.page.totalPage) {
						this.$refs.scroll.forceUpdate(true)
					} else {
						this.$refs.scroll.forceUpdate(false)
					}
					this.onFetching = false
				})
			}
		},
		onPullingDown() {
			// 模拟下拉刷新
			this.findSpreadListPageMethods(1, 10, this.params, this.choseTagsId)
		},
		onPullingUp() {
			// 模拟上拉 加载更多数据
			findSpreadListPage(this.page.pageNumber + 1, this.page.pageSize, this.params, this.choseTagsId).then(resp => {
				this.page.pageNumber = resp.page.pageNumber
				this.page.list = this.page.list.concat(resp.page.list)
				if (this.page.pageNumber < this.page.totalPage) {
					this.$refs.scroll.forceUpdate(true)
				} else {
					this.$refs.scroll.forceUpdate(false)
				}
			})
		},
		async errImg(event) {
			if (!this.enterprise) {
				await getEnterpriseInfo().then(resp => {
					this.enterprise = resp.enterprise
				})
			}
			var img = event.srcElement;
			img.src = this.enterprise.logo_4x3;
			//控制不要一直跳动
			img.onerror = null;
		},
		// 切换标签
		switchTags(id) {
			// 状态机制，防止连续点击标签
			if (!this.onFetching) {
				this.choseTagsId = id
				this.page = {
					totalRow: null,
					pageNumber: 1,
					pageSize: 10,
					lastPage: false,
					list: []
				}
				this.$refs.scroll.forceUpdate(true)
				this.findSpreadListPageMethods(this.page.pageNumber, this.page.pageSize, this.params, this.choseTagsId)
			}

		},
	},
	created() {
		//查找标签
		findYXBrandVideoTags().then(res => {
			this.tags = res.list
			this.tags.forEach(ele => {
				ele.active = false
			})
		})
		this.findSpreadListPageMethods(this.page.pageNumber, this.page.pageSize, this.params, this.choseTagsId)
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.list {
  position: relative;
  height: calc(100vh - 2rem);
}
.isChosedTags {
  color: #2196f3;
}
</style>
